/*
 * @Date: 2020-12-09 09:58:27
 * @LastEditTime: 2020-12-10 01:00:37
 * @FilePath: \web-practice-repo\practice\two\js\index.js
 */
function changeImg(id1,id2) {

}
$(function () {
    var i = 0;//i为图片记号
    var timer = null;//时间变量
    //根据css中设计好的样式,自动在'point'盒子中添加li标签
    for (var j = 0; j < $('#img_list li').length; j++){
        $('#point').append('<li></li>');
    }
    //给第一个圆点添加样式
    $('#img_list li').first().addClass('active');
    //根据鼠标显示隐藏按钮
    $('#container').hover(function () {
        $('#button').show();
    }, function () {
        $('#button').hide();
    });
    var firstImg = $('#img_list li').first().clone();//复制第一张图片
    $('#img_list').append(firstImg).width($('#img_list li').length * ($('#img_list img').width()));
    //定时器轮播
    timer = setInterval(function () {
        i++;
        if (i == $('#img_list li').length) {
            i = 1;
            $('#img_list').css({ left: 0 });//无缝轮播
        }
        //下一张照片
        $('#img_list').stop().animate({ left: -i * 1344 }, 600);
        if (i == $('#img_list li').length - 1) {
            $('#point li').eq(0).addClass('active').siblings().removeClass('active');
        } else {
            $('#point li').eq(i).addClass('active').siblings().removeClass('active');
        }
    }, 1000);
    //鼠标移入,暂停,移除,播放
    $('#container').hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(function () {
            i++;
            if (i == $('#img_list li').length) {
                i = 1;
                $('#img_list').css({ left: 0 });
            };
            $('#img_list').stop().animate({ left: -i * 1344 }, 600);
            if (i == $('#img_list li').length - 1) {
                $('#point li').eq(0).addClass('active').siblings().removeClass('active');
            } else {
                $('#point li').eq(i).addClass('active').siblings().removeClass('active');
            }
        }, 600)
    });
    //按钮:上
    $('#pre').click(function () {
        i--;
        if (i == -1) {
            i = $('#img_list li').length - 2;
            $('#img_list').css({ left: -($('#img_list li').length - 1) * 1344 });
        }
        $('#img_list').stop().animate({ left: -i * 1344 }, 600);
        $('#point li').eq(i).addClass('active').siblings().removeClass('active');
    });
    //按钮:下
    $('#nex').click(function () {
        i++;
        if (i == $('#img_list li').length) {
            i = 1;
            $('#img_list').css({ left: 0 });
        };
        $('#img_list').stop().animate({ left: -i * 1344 }, 600);
        if (i == $('#img_list li').length - 1) {
            $('#point li').eq(0).addClass('active').siblings().removeClass('active');
        } else {
            $('#point li').eq(i).addClass('active').siblings().removeClass('active');
        };
    });
    //鼠标划入圆点
    $('point li').mouseover(function () {
        var _index = $(this).index();
        i = _index;
        $('#img_list').stop().animate({ left: -_index * 1344 }, 600);
        $('#point li').sq(_index).addClass('active').siblings().removeClass('active');
    });
    $('#pro1').hover(function () {
        $('#product1').show();
    }, function () {
        $('#product1').hide();
    });
    $('#pro2').hover(function () {
        $('#product2').show();
    }, function () {
        $('#product2').hide();
    });
    $('#pro3').hover(function () {
        $('#product3').show();
    }, function () {
        $('#product3').hide();
    });
    $('#pro4').hover(function () {
        $('#product4').show();
    }, function () {
        $('#product4').hide();
    });
    $('#pro5').hover(function () {
        $('#product5').show();
    }, function () {
        $('#product5').hide();
    });
    $('#pro6').hover(function () {
        $('#product6').show();
    }, function () {
        $('#product6').hide();
    });
    $('#pro7').hover(function () {
        $('#product7').show();
    }, function () {
        $('#product7').hide();
    });
    $('#pro8').hover(function () {
        $('#product8').show();
    }, function () {
        $('#product8').hide();
    });
    $('#pro9').hover(function () {
        $('#product9').show();
    }, function () {
        $('#product9').hide();
    });
    $('#pro10').hover(function () {
        $('#product10').show();
    }, function () {
        $('#product10').hide();
    });
})